@import "./configuration.scss";

.rankContainer {
  min-height: 100%;
  padding-bottom: 0.94rem;
  background-color: #ffffff;
  font-family: "MiSans-Regular";
  box-sizing: border-box;
}

.rankBanner,
.rankBannerImg {
  width: 100%;
  height: 6.97rem;
  object-fit: cover;
}

.rankContent {
  min-height: 60vh;
  position: relative;
  margin-top: -2.73rem;
  border-top-right-radius: 0.48rem;
  border-top-left-radius: 0.48rem;
  background-color: #ffffff;
}
.rankTab {
  width: 100%;
  padding: 0.39rem 0.63rem 0.61rem;
  box-sizing: border-box;
  @include flex(row, space-between, center);
}

.rankTabLi {
  font-size: 0.32rem;
  color: $sec-color;
}

.rankTabLiCur {
  font-size: 0.32rem;
  color: $main-color;
  font-family: "MiSans-Medium";
}

.rankSelfBox {
  width: 100%;
  padding: 0 0.25rem;
  box-sizing: border-box;
}

.rankSelf {
  width: 100%;
  height: 1.36rem;
  padding: 0 0.38rem;
  background: #faf7ee;
  border-radius: 0.25rem;
  box-sizing: border-box;
  @include flex(row, space-between, center);
}

.rankSelfLeft {
  @include flex(row, flex-start, center);
  .rankSelfImg {
    width: 0.63rem;
    height: 0.63rem;
    margin-right: 0.1rem;
  }
  .rankSelfCount {
    min-width: 0.63rem;
    height: 0.63rem;
    line-height: 0.63rem;
    font-size: 0.35rem;
    color: $four-color;
    font-family: "MiSans-Semibold";
    margin-right: 0.1rem;
    text-align: center;
  }
  .rankSelfTxt {
    font-size: 0.32rem;
    color: $main-color;
    font-family: "MiSans-Medium";
  }
}

.rankSelfRight {
  @include flex(row, flex-start, baseline);
  .rankSelfRightNum {
    color: #f74f00;
    font-size: 0.33rem;
    font-family: "MiSans-Semibold";
    margin-right: 0.06rem;
  }
  .rankSelfRightUnit {
    color: #f74f00;
    font-size: 0.25rem;
    font-family: "MiSans-Normal";
  }
}

.rankOther {
  background-color: #ffffff;
}

.rankEmpty {
  width: 100%;
  text-align: center;
  font-size: 0.25rem;
  color: $sec-color;
  font-family: "MiSans-Regular";
}
